import React from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
//导入登录接口
import { loginApi } from '@/api/login';
// 导入右侧提示组件
import Appnotifycation from '@/components/Appnotifycation'
import { useRef } from 'react';
// 引入store 这个本地存储库
import store from 'store'
// 引入rtk相关的hook
import { useAppDispatch } from '@/store/hooks'
import { updateuserinfo } from '@/store/modules/userReducer';

// 引入路由相关的hook 
import { useNavigate } from 'react-router-dom';
type Props = {};

export default function Myloginform({ }: Props) {
    const ref1 = useRef<any>();
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    // 提交表单
    const onFinish = (values: any) => {
        // console.log('Received values of form: ', values);
        loginApi(values).then(res => {
            //console.log(res);
            // 提示
            ref1.current.openNotificationWithIcon(res.data.code == 200 ? 'success' : 'error', res.data.message)
            // 将token 存到本地
            store.set('token', res.data.data.token)
            // 将对象存进去
            dispatch(updateuserinfo(res.data.data))
            // 跳转到首页
            setTimeout(() => {
                navigate('/home')
            }, 1500)

        })
    };
    return (
        <>
            {/* 使用子组件 */}
            <Appnotifycation ref={ref1}></Appnotifycation>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Form.Item
                >
                    <h2 style={{ textAlign: 'center', margin: '10px 0' }}>嗨购后台系统</h2>
                </Form.Item>

                <Form.Item
                    name="adminname"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        size='large'
                        placeholder="Password"
                    />
                </Form.Item>
                <Form.Item>
                    <Button size='large' block type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </>
    )
}